<template>
  <van-nav-bar title="我的订单" left-arrow @click-left="onClickLeft" />
  <div class="MyOrder">
    <ul class="tab">
      <li
        v-for="(item, index) in order"
        :key="item.title"
        :class="{ bolder: index == num }"
        @click="handleClick(index)"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
  <div v-if="this.orderDetailList.length" class="order-list">
    <van-pull-refresh v-model="state.loading" @refresh="onRefresh">
      <van-card
        v-for="item in orderDetailList"
        :key="item.orderTime"
        :num="item.productNum"
        :price="(item.productNum * item.currentPrice).toFixed(2)"
        :desc="item.orderTime"
        :title="item.productName"
        :thumb="item.imgURL[0]"
      />
    </van-pull-refresh>
  </div>

  <div class="No-orders" v-if="!this.orderDetailList.length">
    <img src="http://81.68.133.139:3000/images/cart/1_03.png" alt="" />
    <p>暂无订单</p>
  </div>
</template>

<script>
let timer = null;
//引用$router和$route
import { useRouter } from "vue-router";
import { reactive } from "vue";
import { getDetail } from "@/utils/api";
import { mapActions, mapState } from "vuex";
export default {
  setup() {
    // 创建路由信息实例
    const router = useRouter();
    // const route = useRoute();
    const orderDetailList = reactive([]);
    const onClickLeft = () => {
      router.go(-1);
    };
    //下拉刷新参数
    const state = reactive({
      loading: false,
    });
    return {
      orderDetailList,
      onClickLeft,
      state,
    };
  },
  data() {
    return {
      order: [
        {
          title: "全部",
        },
        {
          title: "待付款",
        },
        {
          title: "待发货",
        },
        {
          title: "待收货",
        },
        {
          title: "已完成",
        },
      ],
      num: 0,
    };
  },
  async created() {
    //更新数据订单列表
    await this.getOrderList({ userId: localStorage.getItem("userid") });
    // 更新订单详情列表
    this.orderList.forEach((val) => {
      val.productList.forEach(async (value) => {
        let res = await getDetail({ pid: value.productId });
        this.orderDetailList.push({
          ...res.result[0],
          orderTime: "下单时间：" + new Date(+val.orderTime).toLocaleString(),
          productNum: value.productNum,
        });
      });
    });
  },
  filters: {},
  computed: {
    ...mapState("cart", ["orderList"]),
  },
  methods: {
    ...mapActions("cart", ["getOrderList"]),
    handleClick(index) {
      // console.log(index);
      this.num = index;
    },
    // 下拉刷新事件
    onRefresh() {
      clearTimeout(timer);
      timer = setTimeout(async () => {
        //更新数据订单列表
        // console.log(localStorage.getItem("userid"));
        await this.getOrderList({ userId: localStorage.getItem("userid") });
        // 更新订单详情列表
        this.orderDetailList = [];
        await this.orderList.forEach((val) => {
          val.productList.forEach(async (value) => {
            let res = await getDetail({ pid: value.productId });
            this.orderDetailList.push({
              ...res.result[0],
              orderTime:
                "下单时间：" + new Date(+val.orderTime).toLocaleString(),
              productNum: value.productNum,
            });
          });
        });
        setTimeout(() => {
          this.state.loading = false;
        }, 333);
        // this.$nextTick(function () {
        //   // DOM 更新了
        //   this.state.loading = false;
        // })
      }, 1000);
    },
  },
};
</script>

<style lang="less">
.order-list {
  position: fixed;
  overflow: auto;
  top: 105px;
  bottom: 0;
  left: 0;
  right: 0;
}
.van-nav-bar .van-icon {
  color: black;
}
.MyOrder {
  width: 100%;
  height: 50px;
  background: white;
  color: #ababab;
  .tab {
    display: flex;
    justify-content: space-around;
    font-size: 16px;
    padding-top: 16px;
  }
  .bolder {
    color: black;
    font-weight: 700px;
    &::after {
      content: "";
      width: 20px;
      height: 4px;
      background-color: chocolate;
      border-radius: 2px;
      position: absolute;
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
.No-orders {
  width: 100%;
  background-image: linear-gradient(#f9f9f9, #f5f5f5);
  height: 500px;
  img {
    width: 200px;
    height: 200px;
    margin-top: 20px;
    margin-left: 90px;
  }
  p {
    margin-top: 20px;
    font-size: 20px;
    color: #ababab;
    text-align: center;
  }
}
.van-pull-refresh {
  height: 100%;
}
</style>
